<script lang="ts" setup>
import "@nutui/icons-vue/dist/style_iconfont.css";
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
import * as productApi from "@/api/train/product";
import { getOSSURL } from "@/utils/utils";

const spuList = ref<ListProductSpu[]>([]);

// 加载列表
productApi
  .getAllNormalSpuPage({
    pageNo: 1,
    pageSize: 10,
  })
  .then((res) => {
    spuList.value = res.data.list;
  });

const router = useRouter();
// 四个图片
const fourimg = [
  {
    imgSrc: getOSSURL("/imgs/h5-news/imgs/驾校简介.png"),
    Title: "驾校简介",
  },
  {
    imgSrc: getOSSURL("/imgs/h5-news/imgs/服务流程.png"),
    Title: "服务流程",
  },
  {
    imgSrc: getOSSURL("/imgs/h5-news/imgs/报名指南.png"),
    Title: "报名指南",
  },
  {
    imgSrc: getOSSURL("/imgs/h5-news/imgs/联系我们.png"),
    Title: "联系我们",
  },
];
// 控制侧边栏的方法
const menuVisible = ref(false);

const gohome = () => {
  router.push("/newshome");
};

const goNews = () => {
  router.push("/news");
};
// 首次轮播
const state = reactive({
  page: 1,
});
//轮播图
const swiperList = reactive([
  getOSSURL("/imgs/h5-news/imgs/轮播图2.png"),
  getOSSURL("/imgs/h5-news/imgs/轮播图1.png"),
  getOSSURL("/imgs/h5-news/imgs/轮播图3.png"),
  getOSSURL("/imgs/h5-news/imgs/轮播图4.png"),
]);

// 教练信息
const teachers = reactive([
  {
    imgSrc: getOSSURL("/imgs/h5-news/教练imgs/陈勇.jpg"),
    name: "陈勇",
    detail: "三级资格证，教龄7年，主攻C1科二",
  },
  {
    imgSrc: getOSSURL("/imgs/h5-news/教练imgs/程雨.jpg"),
    name: "程雨",
    detail: "四级资格证，教龄8年主攻C1科三",
  },
  {
    imgSrc: getOSSURL("/imgs/h5-news/教练imgs/崔俊.jpg"),
    name: "崔俊",
    detail: "四级资格证，教龄7年，主攻A2科二科三",
  },
  {
    imgSrc: getOSSURL("/imgs/h5-news/教练imgs/华贵平.jpg"),
    name: "华贵平",
    detail: "四级，资格证，教龄6年，主攻B2科二",
  },
  {
    imgSrc: getOSSURL("/imgs/h5-news/教练imgs/熊俊.jpg"),
    name: "熊俊",
    detail: "四级资格证，教龄8年，主攻A1A2A3照科目二科三",
  },
  {
    imgSrc: getOSSURL("/imgs/h5-news/教练imgs/徐海滨.jpg"),
    name: "徐海滨",
    detail: "三级资格证，教龄8年 ，主攻B2科二",
  },
  {
    imgSrc: getOSSURL("/imgs/h5-news/教练imgs/印如锋.jpg"),
    name: "印如锋",
    detail: "四级资格证，教龄6年，主攻科二科三A1A2A3B1B2",
  },
  {
    imgSrc: getOSSURL("/imgs/h5-news/教练imgs/余昭军.jpg"),
    name: "余昭军",
    detail: "四级资格证，教龄5年，主攻C1科二 ",
  },
  {
    imgSrc: getOSSURL("/imgs/h5-news/教练imgs/占如庆.jpg"),
    name: "占如庆",
    detail: "五级资格证，教龄8年，主攻A1A2A3：科二科三",
  },
  {
    imgSrc: getOSSURL("/imgs/h5-news/教练imgs/赵震.jpg"),
    name: "赵震",
    detail: "五级教练证，教龄6年，主攻C1科三",
  },
]);
</script>

<template>
  <!-- 内容页 -->
  <div
    class="w-full min-h-full bg-gray-1 duration-300"
    :class="{ 'translate-x-4/5': menuVisible }"
  >
    <!-- 轮播图 -->
    <div>
      <nut-swiper
        class="h-40"
        :init-page="state.page"
        :pagination-visible="true"
        pagination-color="#426543"
        auto-play="3000"
      >
        <nut-swiper-item v-for="item in swiperList">
          <img :src="item" alt="" />
        </nut-swiper-item>
      </nut-swiper>
    </div>
    <!-- 中间文字 -->
    <div class="bg-slate-700 px-5">
      <div>
        <p class="font-bold text-white text-3xl py-5">江西乐平成功驾校</p>
        <div class="text-white text-xl break-words py-5">
          2009年江西成功驾校开工，2010年底投入使用。成功驾校前后投资4000余万元，按照两项新国标标准建设了集现代化、科学化于一体的大型封闭式机动车驾驶员培训基地.
        </div>
      </div>
    </div>
    <!--四个图片 -->
    <div class="grid grid-cols-4 mt-2 bg-white">
      <div
        v-for="item in fourimg"
        class="flex w-20 flex-col items-center justify-items-center h-20 m-2"
      >
        <img class="h-10 w-12 object-fill" :src="item.imgSrc" alt="" />
        <div class="mt-2">
          <p>{{ item.Title }}</p>
        </div>
      </div>
    </div>
    <!-- 了解更多 -->
    <div class="flex items-center justify-center bg-white">
      <div
        class="b-2 b-solid b-blue h-10 w-50 flex items-center justify-center rounded-3xl"
      >
        了解更多
      </div>
    </div>
    <!-- 推荐课程 -->
    <div class="bg-white">
      <div class="text-2xl font-bold py-5 px-3 border-b-1">推荐课程</div>
      <div class="grid grid-cols-2">
        <div>
          <div class="flex w-40 justify-items-center h-35 bg-red m-3">
            <img :src="getOSSURL('/imgs/h5-news/培训项目/A1大客车.jpg')" alt="" />
          </div>
          <div class="ml-3">A1A2A3 9390元</div>
        </div>
        <div>
          <div class="flex w-40 justify-items-center h-35 bg-red m-3">
            <img :src="getOSSURL('/imgs/h5-news/培训项目/B1中巴车.jpg')" alt="" />
          </div>
          <div class="ml-3">B1B2 8390元</div>
        </div>
        <div>
          <div class="flex w-40 justify-items-center h-35 bg-red m-3">
            <img :src="getOSSURL('/imgs/h5-news/培训项目/C1手动挡.jpg')" alt="" />
          </div>
          <div class="ml-3">C1 2600元</div>
        </div>
        <div>
          <div class="flex w-40 justify-items-center h-35 bg-red m-3">
            <img :src="getOSSURL('/imgs/h5-news/培训项目/C2自动挡.jpg')" alt="" />
          </div>
          <div class="ml-3">C2 2900元</div>
        </div>
      </div>
    </div>

    <!-- 驾校教练 -->
    <div class="bg-white">
      <div class="text-2xl font-bold py-5 px-3 border-b-1">驾校教练</div>
      <div class="flex of-x-scroll of-y-hidden">
        <div
          v-for="item in teachers"
          class="shrink-0 flex w-45 justify-items-center h-60 m-3"
        >
          <div>
            <img :src="item.imgSrc" alt="" />
            <div class="text-center">
              <p>{{ item.name }}</p>
              <p>{{ item.detail }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频 -->
    <div>
      <video controls :src="getOSSURL('/imgs/h5-news/video/宣传视频.mp4')"></video>
    </div>

    <!-- 培训资讯 -->
    <div class="bg-white py-3 px-3">
      <div>
        <div class="text-2xl font-bold py-3 border-b-1">培训资讯</div>
      </div>
      <div>
        <div class="text-xl py-2">新规路考注意事项 考试细节时刻牢记</div>
        <div class="text-sm text-slate-400 py-1">
          实际道路安全驾驶考试技巧你知道多少? 考生参加科目考试
        </div>

        <div class="text-sm text-slate-400 py-1">2016/09/08</div>
      </div>
      <div>
        <div class="text-xl py-2">
          科目四约考最新政策，大大缩短时间，提升通过率
        </div>
        <div class="text-sm text-slate-400 py-1">
          拿证再迈新速度！新改革下，科目四考试可是发生了巨大改变，约考补考时间都大大缩短了，如果你还不知道，赶紧看下去。
        </div>

        <div class="text-sm text-slate-400 py-1">2016/09/30</div>
      </div>
      <div>
        <div class="text-xl py-2">
          乐平市举办第七届“成功驾校杯”新春围棋邀请赛
        </div>
        <div class="text-sm text-slate-400 py-1">
          日前，乐平市第七届“成功驾校杯”新春围棋邀请赛在乐平市围棋协会举办，这是成功驾校驾校连续第七年提供赞助和支持，现已成为了乐平市围棋爱好者的传统赛事。
        </div>

        <div class="text-sm text-slate-400 py-1">2016/10/30</div>
      </div>
    </div>
  </div>
</template>

<style></style>
